@import '~@/style/base.less';

.successAnimationCircle {
  stroke-dasharray: 408.40704497 408.40704497;
  stroke: @color_theme;
  fill: @color_theme;
}

.successAnimationCheck {
  stroke-dasharray: 90 90;
  stroke-width: 8;
  stroke: #ffffff;
}

.errorAnimationCircle {
  stroke-dasharray: 408.40704497 408.40704497;
  stroke: #e54545;
}

.errorAnimationCross {
  stroke-dasharray: 66 66;
  stroke: #e54545;
}

.animation {
  animation: scaleAnimation 1s ease-out 0s 1 both;
}

.animation .successAnimationCircle,
.animation .errorAnimationCircle {
  animation: drawCircle 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both;
}

.animation .successAnimationCheck {
  animation: drawCheck 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both;
}

.animation .errorAnimationCross {
  animation: drawCross 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both;
}

@keyframes scaleAnimation {
  0% {
    opacity: 0;
    transform: scale(1.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes drawCircle {
  0% {
    stroke-dashoffset: 408.40704497;
    fill-opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
}

@keyframes drawCheck {
  0% {
    stroke-dashoffset: 90;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes drawCross {
  0% {
    stroke-dashoffset: 66;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
